<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@page isELIgnored="false" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<!--[if IE 8]>			<html class="ie ie8"> <![endif]-->
<!--[if IE 9]>			<html class="ie ie9"> <![endif]-->
<!--[if gt IE 9]><!-->	<html> <!--<![endif]-->
<head>

	<!-- Meta -->
	<meta charset="utf-8">
	<meta name="keywords" content="HTML5 Template" />
	<meta name="description" content="">
	<meta name="author" content="">

	<title>Doozy | Responsive Ecommerce Portfolio Theme</title>

	<!-- Mobile Metas -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<!-- Favicon -->
	<link rel="shortcut icon" href="/favicon.ico">

	<!-- Google Webfont -->
	<link href="font-awesome-4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
	<link href='http://fonts.googleapis.com/css?family=Courgette' rel='stylesheet' type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Noto+Sans:400,400italic,700,700italic' rel='stylesheet' type='text/css'>

	<!-- CSS -->
	<link rel="stylesheet" href="css/bootstrap.css">
	<link rel="stylesheet" href="js/vendor/slick/slick.css">
	<link rel="stylesheet" href="css/prettyphoto.css">
	<link rel="stylesheet" href="js/vendor/owl-carousel/owl.carousel.css">
	<link rel="stylesheet" href="js/vendor/owl-carousel/owl.theme.css">
	<link rel="stylesheet" href="js/vendor/owl-carousel/owl.transitions.css">
	<link rel="stylesheet" href="js/vendor/flex-slider/flexslider.css">
	<link rel="stylesheet" href="js/vendor/rsplugin/rs-plugin/css/settings.css" media="screen"/>
	<link rel="stylesheet" href="js/vendor/remodal/jquery.remodal.css">
	<link rel="stylesheet" href="js/vendor/flex-slider/flexslider.css">
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="css/index.css">

	<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
	<![endif]-->

</head>
<body>

<div class="body">
	<!-- HEADER -->
	<div class="topbar2-main">
		<div class="container">
			<div class="topbar2">
				<div class="row">
					<div class="col-md-12">
						<ul>
							<li>
								<div class='selectBox'>
									<span class='selected'></span>
									<span class='selectArrow'><i class="fa fa-angle-down"></i></span>
									<div class="selectOptions" >
										<span class="selectOption">我的账户</span>
										<span class="selectOption">用户信息</span>
										<span class="selectOption">订单状态</span>
										<span class="selectOption">愿望单</span>
										<span class="selectOption">修改信息</span>
										<span class="selectOption">退出</span>
									</div>
								</div>
							</li>
							<li>
								<c:if test="${empty sessionScope.client}">
									<p>游客您好，您可以在此<a href="login.jsp">登录</a>或<a href="signup.html">注册</a>.</p>
								</c:if>
								<c:if test="${not empty sessionScope.client}">
									<p>${sessionScope.client.name}您好，欢迎来到Duang！</p>
								</c:if>

							</li>
						</ul>
						<div class="t2-cart">

							<div class="cart-main">
								<c:if test="${not empty sessionScope.client}">
								<i class="fa fa-shopping-cart shop-cart2-i"></i>

								<span><a class="shop-cart2"><em class="t2-pcount">${sessionScope.cartSize}</em> 个物品 - ￥${sessionScope.totalPrice}</a></span>
								</c:if>
									<div id="cart-main">
									<ul>
									</ul>
									<div class="bottom">
										<span class="total">总价:￥${sessionScope.totalPrice}</span>
										<div class="clearfix"></div>
										<a href="./cart.html">付款<i class="fa fa-angle-right"></i></a>
									</div>
								</div>
							</div>
						</div>
						<div class="t2-search">
							<form>
								<input type="text" placeholder="搜索商品">
								<button type="submit"><i class="fa fa-search"></i></button>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="header header3">
		<header>
			<div class="container">
				<div class="row">
					<div class="col-md-12 logo">
						<a href="#"><img src="images/logo.png" class="img-responsive img-centered" alt=""/></a>
					</div>
				</div>
			</div>
		</header>

		<!-- NAVMENU -->
		<nav class="container">
			<div class="nav-main">
				<div id='navmenu'>
					<ul>
						<li><a href='./index.html'>首页</a></li>
						<li><a href='./shop-grid.html'>商城</a></li>
						<li class='has-sub'>
							<a href='#'>团队</a>
							<ul>
								<li><a href='./team.html'>队伍</a></li>
								<li><a href='./team_member.html'>成员</a></li>
							</ul>
						</li>
						<li><a href='./contact.html'>联系我们</a></li>
					</ul>
				</div>
			</div>
		</nav>
	</div>

	<div id="slider" class="slider">
		<!-- FULLSCREEN SLIDER -->
		<div class="tp-banner-container">
			<div class="tp-banner" >
				<ul>
					<!-- SLIDE  -->
					<li data-transition="fade" data-slotamount="7" data-masterspeed="500" data-saveperformance="on"  data-title="Intro Slide">
						<img src="images/dummy.png"  alt="slidebg1" data-lazyload="images/slider/1/1.jpg" data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat">
						<div class="tp-caption lfr tp-resizeme rs-parallaxlevel-10"
							 data-x="752"
							 data-y="180"
							 data-speed="700"
							 data-start="800"
							 data-easing="Power3.easeInOut"
							 data-splitin="none"
							 data-splitout="none"
							 data-elementdelay="0.1"
							 data-endelementdelay="0.1"
							 data-endspeed="300"
							 style="
							z-index: 7; max-width: auto; max-height: auto; white-space: nowrap;	font-size: 70px; font-weight: 400; color: #464545;
							font-family:Courgette;
							letter-spacing:-0.04em;
							">
							funny & <span style="color:#ff5969;">funky</span>
						</div>
						<div class="tp-caption lfr tp-resizeme rs-parallaxlevel-10"
							 data-x="835"
							 data-y="260"
							 data-speed="700"
							 data-start="1200"
							 data-easing="Power3.easeInOut"
							 data-splitin="none"
							 data-splitout="none"
							 data-elementdelay="0.1"
							 data-endelementdelay="0.1"
							 data-endspeed="300"
							 style="
							z-index: 7; max-width: auto; max-height: auto; white-space: nowrap;	font-size: 70px; font-weight: 400; color: #464545;
							font-family:Courgette;
							letter-spacing:-0.04em;
							">
							kids clothes
						</div>
						<div class="tp-caption customin tp-resizeme rs-parallaxlevel-0"
							 data-x="960"
							 data-y="360"
							 data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
							 data-speed="500"
							 data-start="1700"
							 data-easing="Power3.easeInOut"
							 data-splitin="none"
							 data-splitout="none"
							 data-elementdelay="0.05"
							 data-endelementdelay="0.1"
							 style="z-index: 8; max-width: auto; max-height: auto; white-space: nowrap;">
							<a href="#" class="btn-s2" style="color:#fff;">Start Shopping</a>
						</div>
					</li>

					<!-- SLIDE  -->
					<li data-transition="fade" data-slotamount="7" data-masterspeed="500" data-saveperformance="on"  data-title="Intro Slide">
						<img src="images/dummy.png"  alt="slidebg1" data-lazyload="images/slider/1/2.jpg" data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat">
						<div class="tp-caption lfr tp-resizeme rs-parallaxlevel-10"
							 data-x="600"
							 data-y="180"
							 data-speed="700"
							 data-start="800"
							 data-easing="Power3.easeInOut"
							 data-splitin="none"
							 data-splitout="none"
							 data-elementdelay="0.1"
							 data-endelementdelay="0.1"
							 data-endspeed="300"
							 style="
							z-index: 7; max-width: auto; max-height: auto; white-space: nowrap;	font-size: 70px; font-weight: 400; color: #464545;
							font-family:Courgette;
							letter-spacing:-0.04em;
							">
							Check the  <span style="color:#ff5969;">Hot Deals</span>
						</div>
						<div class="tp-caption lfr tp-resizeme rs-parallaxlevel-10"
							 data-x="750"
							 data-y="260"
							 data-speed="700"
							 data-start="1200"
							 data-easing="Power3.easeInOut"
							 data-splitin="none"
							 data-splitout="none"
							 data-elementdelay="0.1"
							 data-endelementdelay="0.1"
							 data-endspeed="300"
							 style="
							z-index: 7; max-width: auto; max-height: auto; white-space: nowrap;	font-size: 70px; font-weight: 400; color: #464545;
							font-family:Courgette;
							letter-spacing:-0.04em;
							">
							and save more
						</div>
						<div class="tp-caption customin tp-resizeme rs-parallaxlevel-0"
							 data-x="960"
							 data-y="360"
							 data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
							 data-speed="500"
							 data-start="1700"
							 data-easing="Power3.easeInOut"
							 data-splitin="none"
							 data-splitout="none"
							 data-elementdelay="0.05"
							 data-endelementdelay="0.1"
							 style="z-index: 8; max-width: auto; max-height: auto; white-space: nowrap;">
							<a href="#" class="btn-s2" style="color:#fff;">Start Shopping</a>
						</div>
					</li>

					<!-- SLIDE  -->
					<li data-transition="fade" data-slotamount="7" data-masterspeed="500" data-saveperformance="on"  data-title="Intro Slide">
						<img src="images/dummy.png"  alt="slidebg1" data-lazyload="images/slider/1/3.jpg" data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat">
						<div class="tp-caption lfr tp-resizeme rs-parallaxlevel-10"
							 data-x="800"
							 data-y="180"
							 data-speed="700"
							 data-start="800"
							 data-easing="Power3.easeInOut"
							 data-splitin="none"
							 data-splitout="none"
							 data-elementdelay="0.1"
							 data-endelementdelay="0.1"
							 data-endspeed="300"
							 style="
							z-index: 7; max-width: auto; max-height: auto; white-space: nowrap;	font-size: 70px; font-weight: 400; color: #464545;
							font-family:Courgette;
							letter-spacing:-0.04em;
							">
							Winter <span style="color:#ff5969;">2015</span>
						</div>
						<div class="tp-caption lfr tp-resizeme rs-parallaxlevel-10"
							 data-x="860"
							 data-y="260"
							 data-speed="700"
							 data-start="1200"
							 data-easing="Power3.easeInOut"
							 data-splitin="none"
							 data-splitout="none"
							 data-elementdelay="0.1"
							 data-endelementdelay="0.1"
							 data-endspeed="300"
							 style="
							z-index: 7; max-width: auto; max-height: auto; white-space: nowrap;	font-size: 70px; font-weight: 400; color: #464545;
							font-family:Courgette;
							letter-spacing:-0.04em;
							">
							Collections
						</div>
						<div class="tp-caption customin tp-resizeme rs-parallaxlevel-0"
							 data-x="960"
							 data-y="360"
							 data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
							 data-speed="500"
							 data-start="1700"
							 data-easing="Power3.easeInOut"
							 data-splitin="none"
							 data-splitout="none"
							 data-elementdelay="0.05"
							 data-endelementdelay="0.1"
							 style="z-index: 8; max-width: auto; max-height: auto; white-space: nowrap;">
							<a href="#" class="btn-s2" style="color:#fff;">Start Shopping</a>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>

	<div class="space15"></div>

	<div class="container main-shop-content">

		<!-- WELCOME -->
		<div class="home-welcome">
			<div class="container">
				<div class="row">
					<div class="col-md-12">
						<h4><span>欢迎</span></h4>
						<p>Step this way for top label girls and boys clothes for mini fashionistas and dapper little gents. Find the best brands and must-have styles in children's clothing always up to 60% less than the RRP. And if you're looking for one-off gems for your fashion-loving darlings, look no further than Doozy.</p>
						<a href="#" class="btn-s2">开始购物</a>
					</div>
				</div>
			</div>
		</div>

		<div class="clearfix space70"></div>

		<!-- SHOP CONTENT -->
		<div class="shop-featured">
			<div class="container">
				<div class="row">
					<div class="col-md-12">
						<h5><span>人文类图书</span></h5>
						<div class="shop-slider1">
							<c:forEach var="book" items="${social}" >
								<div class="col-md-4">
									<div class="product-info">
										<div class="product-thumb">
											<img src="images/shop/1/1.jpg" class="img-responsive" alt=""/>
											<a data-remodal-target="modal">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;预览</a>
										</div>
										<div class="product-price">￥${book.price}</div>
										<h4><a href="./product_single.html">《${book.name}》</a></h4>
										<div><a href="#" class="shop-btn shop-btn2"><i class="fa fa-shopping-cart"></i> 添加到购物车</a></div>
									</div>
								</div>
							</c:forEach>
						</div>
					</div>
				</div>

				<div class="clearfix space70"></div>

				<div class="row">
					<div class="col-md-12">
						<h5><span>教育类图书</span></h5>
						<div class="shop-slider2">
							<c:forEach var="book" items="${edu}" >
								<div class="col-md-4">
									<div class="product-info">
										<div class="product-thumb">
											<img src="images/shop/1/1.jpg" class="img-responsive" alt=""/>
											<a data-remodal-target="modal">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;预览</a>
										</div>
										<div class="product-price">￥${book.price}</div>
										<h4><a href="./product_single.html">《${book.name}》</a></h4>
										<div><a href="#" class="shop-btn shop-btn2"><i class="fa fa-shopping-cart"></i> 添加到购物车</a></div>
									</div>
								</div>
							</c:forEach>
						</div>
					</div>
				</div>

				<div class="clearfix space70"></div>

				<div class="row">
					<div class="col-md-12">
						<h5><span>儿童类图书</span></h5>
						<div class="shop-slider3">
							<c:forEach var="book" items="${child}" >
								<div class="col-md-4">
									<div class="product-info">
										<div class="product-thumb">
											<img src="images/shop/1/1.jpg" class="img-responsive" alt=""/>
											<a data-remodal-target="modal">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;预览</a>
										</div>
										<div class="product-price">￥${book.price}</div>
										<h4><a href="./product_single.html">《${book.name}》</a></h4>
										<div><a href="#" class="shop-btn shop-btn2"><i class="fa fa-shopping-cart"></i> 添加到购物车</a></div>
									</div>
								</div>
							</c:forEach>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-12">
						<h5><span>文艺类图书</span></h5>
						<div class="shop-slider3">
							<c:forEach var="book" items="${art}" >
								<div class="col-md-4">
									<div class="product-info">
										<div class="product-thumb">
											<img src="images/shop/1/1.jpg" class="img-responsive" alt=""/>
											<a data-remodal-target="modal">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;预览</a>
										</div>
										<div class="product-price">￥${book.price}</div>
										<h4><a href="./product_single.html">《${book.name}》</a></h4>
										<div><a href="#" class="shop-btn shop-btn2"><i class="fa fa-shopping-cart"></i> 添加到购物车</a></div>
									</div>
								</div>
							</c:forEach>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="clearfix space60"></div>
	<div class="clearfix "></div>

	<!-- FOOTER -->
	<footer class="footer3" id="footer">
		<div class="container">
			<div class="row">
				<div class="col-md-4">
					<div class="f3-widget">
						<h5>Contact Details</h5>
						<p>
							<span>Warehouse & offices</span><br>
							12345 Street Name, New York, USA<br>
							(012) 345-6789<br>
							(012) 345-6780
					</div>
				</div>

				<div class="col-md-4">
					<div class="f3-widget">
						<h5>Information</h5>
						<ul class="f3-links">
							<li><a href="#">About Us</a></li>
							<li><a href="#">Delivery Information</a></li>
							<li><a href="#">Privacy Policy</a></li>
							<li><a href="#">Terms & Conditions</a></li>
						</ul>
					</div>
				</div>

				<div class="col-md-4">
					<div class="f3-widget">
						<h5>Account</h5>
						<ul class="f3-links">
							<li><a href="./myaccount.html">My Account</a></li>
							<li><a href="#">Order History</a></li>
							<li><a href="#">Wish List</a></li>
							<li><a href="#">Newsletter</a></li>
							<li><a href="#">Specials</a></li>
						</ul>
					</div>
				</div>

				<div class="col-md-4">
					<div class="f3-widget">
						<h5>Customer Service</h5>
						<ul class="f3-links">
							<li><a href="#">Contact Us</a></li>
							<li><a href="#">Returns</a></li>
							<li><a href="#">Site Map</a></li>
							<li><a href="#">Brands</a></li>
							<li><a href="#">Gift Vouchers</a></li>
						</ul>
					</div>
				</div>

				<div class="col-md-4 last-widget">
					<div class="f3-widget">
						<h5>Useful Links</h5>
						<ul class="f3-links">
							<li><a href="#">Brands</a></li>
							<li><a href="#">Gift Vouchers</a></li>
							<li><a href="#">Popular Products</a></li>
							<li><a href="#">Specials</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>

		<div class="footer-bottom">
			<div class="container">
				<div class="footer-bottom-wrap">
					<div class="row">
						<div class="col-md-12">
							<ul class="f3-social">
								<li><a href="#" class="fa fa-facebook"></a></li>
								<li><a href="#" class="fa fa-twitter"></a></li>
								<li><a href="#" class="fa fa-rss"></a></li>
								<li><a href="#" class="fa fa-linkedin"></a></li>
								<li><a href="#" class="fa fa-behance"></a></li>
							</ul>
							<p>&copy; Copyright 2015. All Rights Reserved.</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</footer>
</div>

<!-- SHOP QUICKVIEW MODAL - DEMO -->
<div class="remodal" data-remodal-id="modal" id = "myModal">
	<div class="row product-single">
		<div class="col-md-7">
			<ul class="product-single-nav">
			</ul>
			<div id="product-single" class="flexslider">
				<ul class="slides">
					<li><img src="images/shop/2/1-1.jpg" alt=""/></li>
				</ul>
			</div>
		</div>

		<div class="col-md-5">
			<div class="ps-inner">
				<h4>Keds Adelle Girls Toddler Shoes</h4>
				<span class="ratings ps-ratings">
				<span class="star">
				<a href="#" class="yes fa fa-star"></a>
				<a href="#" class="yes fa fa-star"></a>
				<a href="#" class="yes fa fa-star"></a>
				<a href="#" class="yes fa fa-star"></a>
				<a href="#" class="no fa fa-star"></a>
				</span>
				<em><a href="#">3 reviews</a></em>
				</span>
				<div class="product-price">￥31.99</div>
				<div class="clearfix"></div>
				<div class="clearfix"></div>
				<div class="ps-quantity">
					<h6>数量:</h6>
					<div class="quantity">
						<input type="text" name="qty" id="qty" maxlength="12" value="1" class="input-text qty" />
					</div>
				</div>
				<div class="ps-btn">
					<a href="#" class="addcart"><i class="fa fa-shopping-cart"></i> 添加到购物车</a>
					<a href="#" class="addwishlist"><i class="fa fa-heart"></i> Add to wishlist</a>
				</div>
			</div>
		</div>
	</div>
</div>
</div>

<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/vendor/slick/slick.js"></script>
<script src="js/vendor/isotope/isotope.pkgd.js"></script>
<script src="js/vendor/owl-carousel/owl.carousel.js"></script>
<script src="js/jquery.appear.js"></script>
<script src="js/jquery.inview.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/vendor/flex-slider/jquery.flexslider.js"></script>
<script src="js/vendor/flex-slider/main.js"></script>
<script type="text/javascript" src="js/jquery.countdown.js"></script>
<script src="js/jquery.prettyphoto.js"></script>
<script src="js/vendor/rsplugin/rs-plugin/js/jquery.themepunch.tools.min.js"></script>
<script src="js/vendor/rsplugin/rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
<script src="js/vendor/rsplugin/main.js"></script>
<script src="js/vendor/remodal/jquery.remodal.js"></script>
<script src="js/index.js"></script>
<script src="js/main.js"></script>


</body>
</html>
